/*
 * @Author: caihongtai caihongtai
 * @Date: 2025-03-05 22:44:18
 * @LastEditors: caihongtai caihongtai
 * @LastEditTime: 2025-03-05 22:53:41
 * @FilePath: /ai-interview-vue/src/directives/loading.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

// 防抖函数
function debounce(fn, delay = 300) {
    let timer = null
    return function (...args) {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn.apply(this, args)
            timer = null
        }, delay)
    }
}

export const vLoading = {
    mounted(el, binding) {
        // 获取van-button组件实例
        const button = el.tagName === 'BUTTON' ? el : el.querySelector('.van-button')
        if (!button) return

        // 记录原始文本
        const originalText = button.textContent
        let isLoading = false

        // 设置loading状态
        const setLoading = (loading) => {
            isLoading = loading
            if (loading) {
                button.classList.add('van-button--loading')
                // 添加loading图标
                const loadingIcon = document.createElement('span')
                loadingIcon.className = 'van-button__loading'
                loadingIcon.innerHTML = `
                    <span class="van-loading van-loading--circular van-button__loading-icon">
                        <span class="van-loading__spinner van-loading__spinner--circular">
                            <svg class="van-loading__circular" viewBox="25 25 50 50">
                                <circle cx="50" cy="50" r="20" fill="none"></circle>
                            </svg>
                        </span>
                    </span>
                `
                button.insertBefore(loadingIcon, button.firstChild)
                button.textContent = '加载中...'
            } else {
                button.classList.remove('van-button--loading')
                const loadingIcon = button.querySelector('.van-button__loading')
                if (loadingIcon) {
                    loadingIcon.remove()
                }
                button.textContent = originalText
            }
            button.disabled = loading
        }

        // 使用防抖包装点击处理函数
        el._handleClick = debounce(async (event) => {
            if (isLoading || button.disabled) return

            try {
                setLoading(true)
                await binding.value()
            } finally {
                setLoading(false)
            }
        }, 300)

        el.addEventListener('click', el._handleClick)
    },

    unmounted(el) {
        if (el._handleClick) {
            el.removeEventListener('click', el._handleClick)
        }
    }
}

// 添加相关样式
const style = document.createElement('style')
style.textContent = `
    .van-button--loading {
        opacity: 0.8;
        cursor: not-allowed;
    }

    .van-button__loading {
        display: inline-flex;
        align-items: center;
        margin-right: 4px;
    }

    .van-loading {
        position: relative;
        width: 16px;
        height: 16px;
        display: inline-block;
    }

    .van-loading__circular {
        width: 100%;
        height: 100%;
        animation: van-rotate 0.8s linear infinite;
    }

    .van-loading__circular circle {
        stroke: currentColor;
        stroke-width: 3;
        stroke-linecap: round;
        animation: van-circular 1.6s ease-in-out infinite;
    }

    @keyframes van-rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    @keyframes van-circular {
        0% {
            stroke-dasharray: 1, 200;
            stroke-dashoffset: 0;
        }
        50% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -40;
        }
        100% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -120;
        }
    }
`
document.head.appendChild(style) 